<template>
	<div>
		<div class="scroll-container">
			<div class="scroll-content">
				<p class="ana-pl" v-for="(item, index) in danmuList" :key="`${item.tmpIdx}-${index}`"
					:style="getStyle(index,item.userAna)">
					{{ item.userAna }}
				</p>
			</div>
		</div>
	</div>
	<div class="container-wl">
		<div style="
		    position: absolute;
		    text-align: center;
		    width: 100%;
		    font-size: 18px;
		    color: #777777;
		">生活语录</div>
		<div class="wall-main"></div>
		<div>
			<input class="yl-inp" v-model="myAna" placeholder="可以写当下心情或者适合您的生活语录,留下你的寄语" />
			<div style="
		        text-align: center;
		        color: #a1a1a1;
		        height: 30px;
		        line-height: 30px;
				margin-top:15px;
		    " @click="submitMyAna">提交我的语录</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		ElMessage
	} from 'element-plus'
	import axiosIns from '../util/axios';
	const danmuList = ref([]);
	const myAna = ref('');
	var executedCt = [];
	let nxtFact=0;
	const getStyle = (item,ana) => {
		let intFact=1.6*item;
		if(ana.length>20){
			nxtFact=parseInt(ana.length/12)+nxtFact;
		}
		if(nxtFact!=0 && item!=0){
			intFact=intFact+nxtFact;
		}
		console.log("nxtFact-----"+nxtFact+"----intFact："+intFact);
		if(danmuList.value.length-1==item){
			setTimeout(()=>{
				fetchData();
				nxtFact=0;
			},(intFact+9)*1000);
		}
		return {
			animation: `scroll-up 10s linear ${intFact}s 1 normal backwards`,
		};
	}
	onMounted(() => {
		fetchData();
	});
	const fetchData = () => {
		axiosIns.get("/getAnaAll").then(res => {
			console.log("语录----" + res.data);
			danmuList.value = res.data;
			//生成随机idx
			for (var i = 0; i < danmuList.value.length; i++) {
				danmuList.value[i].tmpIdx=parseInt(Math.random() *100)+100;
			}
		}).catch(err => {
			console.log("获取失败----");
		})
	};
	const submitMyAna = () => {
		if (!myAna.value.trim()) {
			ElMessage({
				message: '请输入寄语后提交！',
				type: 'warning', // 可选：'info', 'success', 'warning', 'error'
				duration: 2000, // 可选：消息显示的时间，单位毫秒，默认3000
			});
			return;
		}
		const param = {
			"userVsId": "id-" + localStorage.getItem("userId"),
			"commentId": (parseInt(Math.random() * 100000) + 100000).toString(),
			"userNick": "nk-" + localStorage.getItem("userId"),
			"userAna": myAna.value,
		}
		axiosIns.post("/setAna", param).then(res => {
			console.log(res);
			ElMessageBox.alert("提交成功！", "温馨提示", {
				confirmButtonText: '确认',
				callback: function() {
					location.reload();
				}
			});
		}).catch(err => {
			ElMessage({
				message: err,
				type: 'error', // 可选：'info', 'success', 'warning', 'error'
				duration: 2000, // 可选：消息显示的时间，单位毫秒，默认3000
			});
		})
	}
</script>

<style>
	.container-wl {
		margin-bottom: 30px;
		position: relative;
		width: 100%;
	}

	.yl-inp {
		width: 100%;
		border: none;
		border-bottom: 1px solid #6f6262;
		height: 30px;
		line-height: 30px;
	}

	.wall-main {
		background: url(/src/assets/img/bjb-bj.png) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 400px;
	}

	/* ------- */
	.scroll-container {}


	.scroll-content {
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		height: 300px;
		z-index: 1;
		overflow: hidden;
	}

	.scroll-content p {
		width: 58%;
		top: -150px;
		margin-left: 18%;
		font-family: fangsong;
		position: absolute;
		margin-top: 30px;
	}

	@keyframes scroll-up {
		0% {
			top: 120%;
		}

		100% {
			top: -20%;
			/* 根据内容高度调整 */
		}
	}
</style>